<template>
  <div class="layout df fn">
    <!-- 左侧导航 -->
    <Siderbar />
    <!-- 右侧内容区 -->
    <div class="container f1 df fdc">
      <!-- 右侧头部 -->
      <Navbar />
      <!-- 右侧内容 -->
      <AppMain />
    </div>
  </div>
</template>

<script>
import AppMain from './AppMain.vue'
import Navbar from './Navbar.vue'
import Siderbar from './Siderbar.vue'
import {mapMutations} from 'vuex'
export default {
  components: {
    Navbar,
    Siderbar,
    AppMain,
  },
  methods: {
    ...mapMutations('app', ['SET_COLLAPSE']),
    //修改放法
    $_resize() {
      //设置固定界限
      const WIDTH = 600

      //实时获取屏幕宽度
      let bodyW = document.body.clientWidth
      // console.log('bodyW :>> ', bodyW)
      //如果屏幕宽度大于600时，设值为false,否则为true
      if (bodyW > WIDTH) {
        this.SET_COLLAPSE(false)
      } else {
        this.SET_COLLAPSE(true)
      }
    },
  },
  mounted() {
    // this.$_resize()
    window.addEventListener('resize', this.$_resize)
  },
  beforeDestroy() {
    window.addEventListener('resize', this.$_resize)
  },
}
</script>

<style lang="scss" scoped>
.layout {
  height: 100%;
}
</style>
